<!-- Horizontal Form -->


<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">新增订单</h3>
        <h3 class="msg"></h3>
    </div>
    <div id="m">
        <template>
            <el-container>
                <!--选择商品-->
                <el-header>
                    <el-row>
                        <el-col :span="1"><h5>开单人:</h5></el-col>
                        <el-col :span="3">
                            <el-select v-model="username" placeholder="请选择开单人">
                                <el-option
                                        v-for="item in users"
                                        :key="item.id"
                                        :label="item.username"
                                        :value="item.username">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="1">&nbsp</el-col>
                        <el-col :span="1"><h5>会员号:</h5></el-col>
                        <el-col :span="3">
                            <el-input @change="handleChange" v-model="memberId" placeholder="请输入会员编号或手机号码"></el-input>
                        </el-col>
                        <el-col :span="2">&nbsp</el-col>
                        <el-col :span="3">
                            <el-input v-model="skuId" placeholder="请输入或扫码单品编码"></el-input>
                        </el-col>
                        <el-col :span="3">
                            <el-button type="primary" @click="selectSku">添加商品</el-button>
                        </el-col>


                    </el-row>
                </el-header>
                <!-- 订单主体-->
                <el-main>
                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column
                                prop="id"
                                label="编号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="品名"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                prop="specifications"
                                label="规格"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                prop="url"
                                label="图片">
                            <template slot-scope="scope">
                                <img :src="scope.row.url"/>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="price"
                                label="价格">
                        </el-table-column>
                        <el-table-column
                                label="数量选择">
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.num" @change="handleChange" :min="1" :max="100"></el-input-number>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" class="btn-red" @click="del(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>

                    </el-table>


                </el-main>
                <!--计算金额数量 且设置用户-->
                <el-footer>
                    <el-row>
                        <el-col :span="1"><h5 style="color: #0000ee">总价:</h5></el-col>
                        <el-col :span="2" ><h5 v-text="sumPrice" style="color: red"></h5></el-col>

                        <el-col :span="1"><h5 style="color: #0000ee">优惠金额:</h5></el-col>
                        <el-col :span="2"><h5 v-text="preMoney" style="color: #0b97c4"></h5></el-col>

                        <el-col :span="1"><h5 style="color: #0000ee">实付金额:</h5></el-col>
                        <el-col :span="2"><h5 v-text="payPrice" style="color: #00B83F"></h5></el-col>
                        <el-col :span="9"></el-col>
                        <el-col :span="6">
                            <el-button   @click="channel">Cancel</el-button>
                            <el-button type="success" @click="submit" plain>生成订单</el-button>
                        </el-col>
                    </el-row>
                </el-footer>
            </el-container>
        </template>
    </div>
</div>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="/elementUI/elementUI.css">
<!-- 必须先引入vue，  后使用element-ui -->
<script src="/elementUI/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="/elementUI/elementUI.js"></script>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js"></script>
<script type="text/javascript">
    var m = new Vue({
        el: "#m",
        created() {
            // 用户初始化 除了超级管理员的.
            $.ajax({
                url: "user/selectUsersByNotAdmin",
                type: "get",
                success: function (arg) {
                    if(arg.state == 1){
                        let data = arg.data;
                        m.users=data;
                    }else{
                        alert(arg.message);
                    }
                },
                error: function (arg) {
                    console.log(arg);
                    alert("操作失败")
                }
            })
        },
        data() {
            return {
                memberId: "",
                preMoney: 0,
                payPrice: 0,
                sumPrice: 0,
                skuId: '',
                users: [],
                username: '',
                tableData: []
            }
        },
        methods: {
            submit() {
                let data = {"memberId":m.memberId};
                data.preMoney = m.preMoney;
                data.payMoney = m.payPrice;
                data.totalMoney = m.sumPrice;
                data.username = m.username;
                data.skus = m.tableData;

                let json = JSON.stringify(data);
                //所属店铺. 后端直接根据当前登录用户自动添加
                $.ajax({
                    url: "order/add",
                    type: "POST",
                    data: json,
                    contentType: 'application/json;charset=UTF-8',
                    dataType: "json",
                    success: function (arg) {
                        if(arg.state == 1){
                            alert("下单成功")
                            $("#mainContentId").removeData("rowData");
                            $("#mainContentId").load("/order");
                        }else{
                            alert(arg.message);
                        }
                    },
                    error: function (arg) {
                        console.log(arg);
                        alert("操作失败")
                    }
                })
            },
            handleChange() {
                // 更改数量,重新计算总价 总数量 判断是否有会员id , 到后端计算回显
                let orderItems =[];
                // 准备给后端的数据
                m.tableData.forEach(function(item,index){
                    let orderItem = {};
                    orderItem.skuId = item.id;
                    orderItem.price = item.price;
                    orderItem.num = item.num;
                    orderItems.push(orderItem);
                })
                let param = {"orderItems":orderItems};
                param.memberId = m.memberId;
               let json =JSON.stringify(param)
                $.ajax({
                    url: "order/sumPrice",
                    type: "POST",
                    data: json,
                    contentType: 'application/json;charset=UTF-8',
                    dataType: "json",
                    success: function (arg) {
                        if(arg.state == 1){
                            let data = arg.data;
                            m.sumPrice = data.sumPrice;
                            m.payPrice = data.payPrice;
                            m.preMoney = data.preMoney;
                        }else{
                            alert(arg.message);
                        }
                    },
                    error: function (arg) {
                        console.log(arg);
                        alert("操作失败")
                    }
                })

            },
            del(skuId){
                // 上面的tabledata删掉对于的商品
                m.tableData.forEach(function(item,index){
                    if(item.id==skuId){
                        m.tableData.splice(index,1)
                    }
                })
                //删除后重新计算价格
                m.handleChange();

            },
            // 等待成功后才能去计算总价 不然sku的数据还没有添加的  tablaData中
            async selectSku(){
                let flag = true;
                // 根据skuId 拿取数据
                m.tableData.forEach(function(item,index){
                    if(item.id==m.skuId){
                        item.num ++ ;
                        flag = false;
                    }
                })
                // 如果id是同一个sku , 则不需要发请求
                 if(flag){
                    let param = {"id":this.skuId};
                     await $.ajax({
                        url: "sku/idSpuName/",
                        type: "GET",
                        data: param,
                        success: function (arg) {
                            if(arg.state == 1){
                                let sku = arg.data;
                                sku.num = 1;
                                m.tableData.push(sku)
                            }else{
                                if(arg.message){
                                    alert(arg.message)
                                }else{
                                    alert("操作失败")
                                }
                            }
                        },
                        error: function (arg) {
                            console.log(arg);
                            alert("失败")
                        }
                    })
                }
                //添加商品后重新计算价格
                m.handleChange();
            },
            channel(){
                    $("#mainContentId").removeData("rowData");
                    $("#mainContentId").load("/order");
            }
        }
    });
</script>






